<template>
  <view style="width: 100%; min-height: 100vh; position: relative;">
    <view style="width: 100%; height: 100%; padding: 0 60upx;">
      <view class="flex justify-between align-center" style="width: 100%; height: 98upx; border-bottom: 2upx solid #F8F8F8;">
        <view style="font-size: 26upx; font-weight: bold; color: #333333;">请绑定持卡人本人的银行卡</view>
      </view>
      <view class="flex justify-between align-center" style="width: 100%; height: 98upx; border-bottom: 2upx solid #F8F8F8;">
        <view style="font-size: 26upx; color: #333333;">持卡人姓名</view>
        <view class="flex align-center">
          <input type="text" v-model="bank_user_name" :disabled="disabled" placeholder="未填写" style="text-align: right; font-size: 28upx; color: #999999;">
        </view>
      </view>
      <view class="flex justify-between align-center" style="width: 100%; height: 98upx; border-bottom: 2upx solid #F8F8F8;">
        <view style="font-size: 26upx; color: #333333; width: 50%;">银行卡号码</view>
        <view class="flex align-center" style="width: 50%; text-align: right;">
          <input type="number" v-model="bank_account_no" :disabled="disabled" maxlength="19" placeholder="未填写" style="width: 100%; text-align: right; font-size: 28upx; color: #999999;">
        </view>
      </view>
      <view class="flex justify-between align-center" style="width: 100%; height: 98upx; border-bottom: 2upx solid #F8F8F8;">
        <view style="font-size: 26upx; color: #333333;">银行名称</view>
        <view class="flex align-center">
          <input type="text" v-model="bank_name" :disabled="disabled" placeholder="未填写" style="text-align: right; font-size: 28upx; color: #999999;">
        </view>
      </view>
    </view>
    <view v-if="!is_bank" class="flex justify-center" style="width: 100%; position:absolute; bottom: 30%;">
      <view @click="handleSaveMyBankCard" class="flex align-center justify-center"
            style="width: 596upx; height: 80upx; margin-bottom: 30upx; background-color: #E52718; color: white; font-size: 28upx; border-radius: 40upx;">
        保存
      </view>
    </view>
  </view>
</template>

<script>
import {bankAccount_bankInfo, bankAccount_getInfoByUserId} from 'api/bank/bank'
export default {
  data(){
    return {
      bank_user_name: '',//持卡人姓名
      bank_account_no: '', //银行卡密码
      bank_name: '',//银行名称
      is_bank: '',
      disabled: false,
    }
  },
  methods:{
    pageInit(){
      bankAccount_getInfoByUserId().then(res=>{
        if(res.data.bank_account){
          this.bank_user_name = res.data.bank_account.bank_user_name;
          this.bank_name = res.data.bank_account.bank_name;
          this.bank_account_no = res.data.bank_account.bank_account_no;
        }
        this.is_bank = res.data.is_bank;
        if(this.is_bank){
          this.disabled = true;
        }
      })
    },
    //保存银行卡信息
    handleSaveMyBankCard(){
      const validateToast = (vm, rules) => {
        return new Promise((resolve, reject) => {
          Object.keys(rules).forEach((key) => {
            const segments = key.split('.')
            const item = rules[key]
            item.forEach((ruleItem) => {
              const value = segments.reduce((total, item) => total && total[item], vm)
              // 必填
              if (ruleItem.required && !value) {
                reject(ruleItem.message)
              }
              // 正则
              if (ruleItem.pattern && !ruleItem.pattern.test(value)) {
                reject(ruleItem.message)
              }
            })
          })
          resolve(true)
        })
      }
      const validate_val_obj = {
        bank_user_name: this.bank_user_name,
        bank_account_no: this.bank_account_no,
        bank_name: this.bank_name,
      }
      const rules = {
        bank_user_name: [
          {required: true, message: '请输入持卡人姓名'}
        ],
        bank_account_no: [
          {required: true, message: '请输入银行卡号码'},
          { pattern: /^\d{16,19}$/, message: '银行卡号码至少16位，最多19位' }
        ],
        bank_name: [
          {required: true, message: '请输入银行名称'}
        ],
      }
      validateToast(validate_val_obj, rules).then(valid =>{
        bankAccount_bankInfo(validate_val_obj).then(res=>{
          uni.showToast({
            title: '绑定成功',
            icon: 'none'
          })
          setTimeout(()=>{
            uni.navigateBack({
              delta: 1
            });
          },500)
        }).catch(err=>{
          console.log(err)
          uni.showToast({
            title: err.msg,
            icon: 'none'
          })
        })
      }).catch(err=>{
        uni.showToast({
          title: err,
          icon: 'none'
        })
      })
    }
  },
  onLoad(){
    this.pageInit();
  }
}
</script>

<style scoped>

</style>
